<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script>
      // function fn(cb){
      //     setTimeout(() => {
      //         console.log("执行了fn函数");
      //         // console.log("执行了后续操作");
      //         cb && cb();
      //     }, 1000);
      // }

      // 1.回调函数
      // fn(function(){
      //     console.log("执行异步之后的代码");
      // });

      // 2.promise来解决异步问题

      // function fn(){
      //     return new Promise(res=>{
      //         setTimeout(() => {
      //         console.log("执行了fn函数");
      //         // console.log("执行了后续操作");
      //         res();
      //     }, 1000);
      //     })
      // }

      // fn().then(()=>{
      //     console.log("执行异步之后的代码");
      // })

      // 3.观察者模式 ：多个对象间 互相影响 ，一个对象发生改变会触发另外的对象改变；
      // 1.延迟执行 （解决异步问题）2.一对多
      // document.addEventListener("click",function(){
      //     console.log("点击了111");
      // })
      // document.addEventListener("click",function(){
      //     console.log("点击了222");
      // })

      // let zhangsan  = {
      //     name:"张三",
      //     fn(){
      //         console.log("我是张三函数");
      //     }
      // }

      // let lisi  = {
      //     name:"李四",
      //     fn2(){
      //         console.log("我是李四函数");
      //     }
      // }

      // 1.收集多种方法 2.延迟执行多次方法
      // 观察者模式 （自定义事件）;
      class Observe {
        constructor() {
          this.handles = {}; //存被观察的方法；
        }
        addEvent(evnetName, fn) {
          // { myclick: [fn1,fn2,fn3...] ,myclick2:[]}
          if (typeof this.handles[evnetName] == "undefined") {
            this.handles[evnetName] = [];
          }
          this.handles[evnetName].push(fn);
        }
        // 触发事件 trigger  , dispath
        trigger(evnetName) {
          this.handles[evnetName].forEach((fn) => {
            fn();
          });
        }
      }

      // 一个对象
      // let obj = new Observe();
      // obj.addEvent("myclick",zhangsan.fn);
      // obj.addEvent("myclick",lisi.fn2);
      // setTimeout(() => {
      //     obj.trigger("myclick");
      // }, 3000);

      // let EventObj = new Observe();
      // function fn() {
      //     setTimeout(() => {
      //         console.log("执行了fn函数");
      //         // console.log("执行了后续操作");
      //         EventObj.trigger("myevent");
      //     }, 1000);
      // }

      // EventObj.addEvent("myevent", function () {
      //     console.log("异步执行完成之后需要执行的代码");
      // })
      // fn();

      // js原生的自定义事件
      // EventTarget  自定义事件 类；
      let eventObj = new EventTarget();

      function fn() {
        setTimeout(() => {
          console.log("执行了fn函数");
          // console.log("执行了后续操作");
          // EventObj.trigger("myevent");
          // 触发自定义事件
          eventObj.dispatchEvent(new CustomEvent("myevent"));
        }, 1000);
      }

      eventObj.addEventListener("myevent", function () {
        console.log("异步之后需要执行的代码");
      });

      fn();
    </script>
  </body>
</html>
